<template>
  <div id="left-home" :style="{ backgroundImage: bgImg, color: '#38E5DE' }">
    <div
      class="title base"
      style="color: #fff; font-size: 18px; font-weight: bold; line-height: 24px"
    >
      冷链入境总览
      <img src="../../assets/img/common/close-16px.png" class="close-btn base-pointer" @click="closeLeftWindow" height="16"
           width="16"/>
    </div>
    <el-tabs @tab-click="handleClick" type="card" :stretch="true">
      <el-tab-pane label="当日" >

        <!-- <div class="progress-title"><span>集装箱</span><span>{{Container_Day_Count}}个</span></div>
         <LeftProgress :percentage="percentageObj.percentage1" />
         <div class="progress-title"><span>总重量</span><span>{{Container_Day_Total_Weight}}吨</span></div>
         <LeftProgress :percentage="percentageObj.percentage2" /> -->
        <div class="package-info">
          <div class="package-box" @click="openList(1)">
            <div class="package-title">集装箱(总数/个)</div>
            <div class="package-list" style="margin-top: 7px; color: #fff; font-weight: bold;">
              <span style="font-size: 35px; width: 100%;    font-family: electronicFont;">{{Container_Day_Count}}</span>
            </div>
          </div>
          <div class="package-box2" @click="openList(2)">
            <div class="package-title">集装箱(总重/吨)</div>
            <div class="package-list" style="    margin-top: 7px;">
              <span style="font-size: 35px; width: 100%; font-family: electronicFont;">{{Container_Day_Total_Weight}}</span>
            </div>
          </div>
        </div>
        <!-- <div class="progress-title"><span>总件数</span><span>2000个</span></div>
         <LeftProgress :percentage="percentage3" /> -->
      </el-tab-pane>
      <el-tab-pane label="当年累计" >
        <!-- <div class="progress-title"><span>集装箱</span><span>{{Container_Cum_Count}}个</span></div>
         <LeftProgress :percentage="percentageObj.percentage3" />
         <div class="progress-title"><span>总重量</span><span>{{Container_Cum_Total_Weight}}吨</span></div>
         <LeftProgress :percentage="percentageObj.percentage4" /> -->

        <div class="package-info">
          <div class="package-box" @click="openList(3)">
            <div class="package-title">集装箱(总数/个)</div>
            <div class="package-list" style="margin-top: 7px; color: #fff; font-weight: bold;">
              <span style="font-size: 35px; width: 100%;    font-family: electronicFont;">{{Container_Cum_Count}}</span>
            </div>
          </div>
          <div class="package-box2" @click="openList(4)">
            <div class="package-title">集装箱(总重/吨)</div>
            <div class="package-list" style="    margin-top: 7px;">
              <span style="font-size: 35px; width: 100%; font-family: electronicFont;"> {{Container_Cum_Total_Weight}}</span>
            </div>
          </div>
        </div>
        <!-- <div class="progress-title"><span>总件数</span><span>2000个</span></div>
         <LeftProgress :percentage="percentage3" /> -->
      </el-tab-pane>
      <div
          class="title base"
          style="
          color: #fff;
          font-size: 18px;
          font-weight: bold;
          line-height: 24px;
          padding-top: 15px;
        "
      >
        冷链物跟踪
      </div>
      <div class="pic-mid ns-cum-thr-container" >
        <div class="pic1" @click="clickNav(1)">
          <span>冷链溯源</span>
        </div>
        <div class="pic2" @click="clickNav(2)">
          <span>冷冻品流向图</span>
        </div>
      </div>
      <div
        class="title base"
        style="
          color: #fff;
          font-size: 18px;
          font-weight: bold;
          line-height: 24px;
          padding-top: 15px;
        "
      >
        南山当前存放冷冻货物（单位：吨）
      </div>
      <div id="goods-charts" ref="histogram"></div>
    </el-tabs>
    <!-- <ColdChain></ColdChain> -->
    <!-- <PackageTable></PackageTable> -->
    <!-- <WorldMapModal></WorldMapModal> -->
  </div>
</template>

<script>
import http from "@/commons/utils/httpUtil";
import LeftProgress from "./components/Progress";
import { defineComponent, reactive, ref, toRefs, onMounted } from "vue";
import echartsUtil from "../../commons/utils/echartsUtil";
import ColdChain from "./components/ColdChain";
import PackageTable from "./components/PackageTable";
import WorldMapModal from "./components/WorldMapModal";
import baseConfig from "@/service/index";

export default defineComponent({
  name: "LeftMenu",
  components: {
    LeftProgress,
    ColdChain,
    PackageTable,
    WorldMapModal,
  },
  setup(props) {
    const histogram = ref(null);
    const state = reactive({
      bgImg: "url(" + require("../../assets/img/common/ce_left.png") + ")",
      percentageObj: {
        percentage1: "50%",
        percentage2: "70%",
        percentage3: "30%",
        percentage4: "60%",
      },
      Container_Day_Count: 0,
      Container_Cum_Count: 0,
      Container_Day_Total_Weight: 0,
      Container_Cum_Total_Weight: 0,
      Pass_Day_Container_Count: 0,
      Pass_Cum_Container_Count: 0,
      Pass_Day_Container_Weight: 0,
      Pass_Cum_Container_Weight: 0,
      showModal: false,
    });
    const handleClick = (tab, event) => {
      console.log(tab);
      console.log(event);
    };
    // 冷链溯源和流向图弹窗
    const clickNav = (type) => {
      if  (type === 1) {
        window.AC.ShowWindow(6, baseConfig.basePath +"/left-menu/ColdChain", {
          draggable: false,
          resize: false,
          callbackFn: function (data) {
            console.log("ShowWindow:" + JSON.stringify(data));
          },
        });
      } else {
         window.AC.ShowWindow(6, baseConfig.basePath +"/left-menu/WorldMapModal", {
          draggable: false,
          resize: false,
          callbackFn: function (data) {
            console.log("ShowWindow:" + JSON.stringify(data));
          },
        });
      }
      
    };
    //打开集装箱列表
    const openList = (type) => {
      console.log(type)
      window.AC.ShowWindow(6, baseConfig.basePath +"/right-menu/PackageTable", {
        draggable: false,
        resize: false,
        callbackFn: function (data) {
          console.log("ShowWindow:" + JSON.stringify(data));
        },
      });
    }

    const closeLeftWindow=()=> {
      window.AC.HideWindow(1, {
        callbackFn: function (data) {
        }
      });
      //关闭右边
      window.AC.HideWindow(11, {
        callbackFn: function (data) {
        }
      });
      //关闭中间自定义标签
      window.AC.HideCustomWindow('overlabel',{
        callbackFn:function(data){
          console.log("关闭中间自定义标签:",data)
        }
      })

    };

    // 默认打开右边的页面
    const initRightPage = () => {
       window.AC.ShowWindow(11, baseConfig.basePath +"/right-menu", {
          draggable: false,
          resize: false,
          callbackFn: function (data) {
            console.log("ShowWindow:" + JSON.stringify(data));
          },
        });
    }
    const drawMap = (data, serierData) => {
      // echartsUtil.initMyChart(myChart.value)
      const myChart = echartsUtil.initMyChart(histogram.value);
      const option = {
        color: "#45A5E5",
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          },
          textStyle: {
            fontSize: 16
          },
          formatter: function (params) {
            debugger
            return params[0].name+"："+params[0].data+"吨" ;
          }
        },
        legend: {
          show: true,
          data: data,
          top: 'bottom',
          itemWidth: 20,
          textStyle: {
            fontSize: 16,
            color: '#FFFFFF',
            opacity: 0.85
          }
        },
        xAxis: [{
          type: "category",
          // data: ["CCT", "SCT", "妈湾", "冻库A", "冻库B"],
          data:data,
          axisPointer: {
            type: 'shadow'
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#fff',//坐标值得具体的颜色

            }
          }
        },
          {
            type: 'category',
            axisPointer: {
              type: 'shadow'
            },
            axisLine: {
              textStyle: {
                color: '#fff',//坐标值得具体的颜色

              },
              z: 2
            }
          }
        ],
        yAxis:  [
          {
            type: 'value',
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
            nameTextStyle: {
              align: "center",
              fontSize: 16
            }
          },
          {
            type: 'value',
            axisLabel: {
              formatter: '{value} %',
              textStyle: {
                color: '#fff'
              }
            },
            axisPointer: {
              type: "line"
            },
            nameTextStyle: {
              fontSize: 16
            }
          },
        ],
        dataZoom: [{
          type: "inside"
        }],
        grid: {
          left: '2%',
          right: '2%',
          bottom: '16%',
          top: '15',
          containLabel: true
        },
        series: [
          {
            // data: [120, 200, 150, 80, 70],
            data: serierData,
            type: "bar",
            barWidth: 26,
            itemStyle: [
              echartsUtil.getLinearGradient(0, 0, 0, 1, '#198BFC', '#33EEFF'),
              echartsUtil.getLinearGradient(0, 0, 0, 1, '#C8B238', '#FFE34D'),
              {normal: {color: '#33EEFFFF'}},
              {normal: {color: '#FFE34DFF'}}
            ]
          },
        ],
      };
      myChart.setOption(option);

      myChart.on("click", function (params) {
        openList(1);
        /*switch (params.seriesIndex) {
          case 0: alert(params.name+","+params.value);
            break;
          case 1:
            alert(params.name+","+params.value);
            break;
          default: break;
        }*/
      });
    };
    const getPortFreezerData = () => {
      http.get('/large/queryOverviewHomePage').then(res => {
        if(res.data.data && res.data.state == 'success') {
          const { optionList } = res.data.data
          optionList.forEach(item => {
            if(item.key == 'Container_Day_Count'){
              state[item.key] =  item.values
            }else if(item.key == 'Container_Cum_Count') {
               state[item.key] =  item.values
            }else if(item.key == 'Container_Day_Total_Weight') {
               state[item.key] =  item.values
            }else if(item.key == 'Container_Cum_Total_Weight') {
               state[item.key] =  item.values
            }
          })
        }
      }).catch(err => {
        console.log(err)
      })
    }
    const getHistogramData = () => {
        http.get('/large/queryWarehouseData').then(res => {
        if(res.data.data && res.data.state == 'success') {
          const { dataList } = res.data.data
          const cateData = [], mapData = []
          if(dataList && dataList.length > 0){
            dataList.forEach(item => {
              cateData.push(item.name)
              mapData.push(item.qty/1000)
            })
          }
          drawMap(cateData, mapData)
        }
        
      }).catch(err => {
        console.log(err)
      })
    }
    const openDiyModal = () => {
      window.AC.ShowCustomWindow("overlabel", baseConfig.basePath +"/mid-menu", 635, 45, 650, 100, true, {
        "draggable": false,
        "resize": false,
        callbackFn: function (data) {
          console.log("ShowCustomWindow:", data)
        }
      });
    }

    //打开港口、冷库位置标签
    const openPosition=()=>{

    }
    onMounted(() => {
      initRightPage()
      getPortFreezerData()
      getHistogramData()
      openDiyModal()
      openPosition()
    });
    return {
      initRightPage,
      histogram,
      ...toRefs(state),
      handleClick,
      clickNav,
      getHistogramData,

      openDiyModal,
      openPosition,
      closeLeftWindow,
      openList
    };
  },
});
</script>
<style scoped>
#left-home {
  height: calc(934px - 16px);
  width: calc(360px - 34px);
  padding: 16px 18px 0 16px;
}
.title {
  padding-bottom: 15px;
  padding-left: 20px;
  margin-bottom: 20px;
  background: url(../../assets/img/common/title-bg.png) no-repeat bottom;
}
.base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}
.progress-title {
  margin: 10px 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.progress-title span {
  color: #fff;
}
</style>
<style>
@font-face{
  font-family:electronicFont;
  src:url(../../assets/font/DS-DIGIT.TTF)
}
.el-tabs__nav {
  width: 100%;
}

.el-tabs__item {
  color: #ffffffd9;
  width: 33.333333%;
}

.el-space__item {
  width: 100%;
}

.el-divider--horizontal {
  margin: 10px 0;
}
.base-pointer {
  cursor: pointer;
}
.ns-cum-thr-container {
  background-color: #ffffff0f;
  margin-bottom: 10px;
}
.el-tabs__item.is-active,
.el-tabs__item:hover {
  color: #fff;
  background-color: #45a5e5;
  font-weight: bold;
}

.el-tabs__active-bar {
  background-color: #4684ae;
}
.el-tabs--card > .el-tabs__header .el-tabs__item {
  border-bottom: 1px solid #fff;
}
.el-progress__text {
  display: none;
}
.el-progress-bar__outer {
  background: #000;
}
.el-progress-bar__inner {
  background-image: linear-gradient(90deg, #95f204 0%, #ffff00 100%);
}
.el-progress-bar__inner::after {
  width: 26px;
  height: 26px;
  background: url(../../assets/img/common/progress-icon.png) no-repeat center;
  position: absolute;
  top: -8px;
  right: -4px;
  z-index: 10;
}
.el-progress-bar__outer2 {
  background-color: #000;
  height: 6px;
  border-radius: 100px;
  /* overflow: hidden; */
  position: relative;
  vertical-align: middle;
}
.pic-mid {
  position: relative;
  margin: 20px 0;
}
.pic1 {
  width: 100%;
  height: 77px;
  line-height: 77px;
  text-align: left;
  background: url(../../assets/img/common/ad1.png) no-repeat center;
  margin-bottom: 20px;
}
.pic2 {
  width: 100%;
  height: 77px;
  line-height: 77px;
  text-align: left;
  background: url(../../assets/img/common/ad2.png) no-repeat center;
}
.pic1 span,
.pic2 span {
  margin-left: 20px;
  display: inline-block;
  margin-top: 5px;
  cursor: pointer;
}
#goods-charts {
  width: 325px;
  height: 390px;
}
.package-info {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.package-info .package-box {
  width: 158px;
  height: 100px;
  background: url(../../assets/img/common/package-bg2.png) no-repeat center;
}
.package-title {
  position: relative;
  margin-top: 15px;
  text-align: center;
  padding-left: 10px;
  font-weight: bold;
  color: #fff;
  font-size: 14px;
}

.package-list {
  position: relative;
  margin-top: 7px;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  color: #f1ac58;
  font-size: 12px;
}
.package-list:nth-child(3) {
  color: #fff;
}
.package-info .package-box2 {
  width: 158px;
  height: 100px;
  background: url(../../assets/img/common/package-bg1.png) no-repeat center;
}
.package-box2 .package-title {
  color: #00d5ff;
}
.package-box2 .package-list {
  color: #00d5ff;
  font-weight: bold;
}
.package-box2 .package-list:nth-child(3) {
  color: #fff;
}
</style>